<script setup>

    import { ref,defineProps,watch,defineEmits } from 'vue'

    import { userStore } from '@/store/user.js'
    import { useRouter } from 'vue-router'

    import { ElMessage  } from 'element-plus';

    import axios from 'axios'

    const dialogVisibleInner = ref(false);
    const book = ref({});

    const props = defineProps({
        dialogVisible:{
            type:Boolean,
            required:true
        },
        bookId:{
            type:Number,
            required:true
        }
    })

    //监听 prop 下面的 dialogVisible 的值
    watch(() => props.dialogVisible, (newVal) => {
        console.log("newVal",newVal)
        if (newVal){
            findBookById();
        }
    });

    //定义 父组件的事件
    const emit = defineEmits('close')

    //关闭 dialog 的弹窗
    const handlerClose = ()=>{
        dialogVisibleInner.value = false;
        // 告诉父组件，当前子组件关闭了
        emit('close', false);
    }

    const findBookById = async ()=>{
       const resp = await axios.get(`/book/findById/${props.bookId}`);
        console.log(resp);
        book.value = resp.data;
        //展示 dialog
        dialogVisibleInner.value = true;
    }

    const userItemStore = userStore()
    const router = useRouter()
    const addCart = (id)=>{
        //判断是否登录
        if (userItemStore.loggedIn){
            //添加到购物车
            axios.post(`/cart/${id}`).then(resp=>{
                //关闭dialog
                handlerClose()
                ElMessage.success("添加成功...")
            })

        }else{
            //没有登录 跳转
            ElMessage.success("请先登录，后添加购物车")
            router.push('/login')
        }
    }

</script>

<template>

    <!-- 查看详情对话框，打开对话框调用方法 -->
    <el-dialog v-model="dialogVisibleInner" title="书籍详情" @close="handlerClose">
        <div class="dialog-content">
            <div class="book-image">
                <img :src="$urlImage + book.imgSrc" alt="书籍详情">
            </div>
            <div class="book-info">
                <h2 class="title">《{{ book.name }}》</h2>
                <p class="author">作者：{{ book.author }}</p>
                <p class="publisher">出版社：{{ book.publisher }}</p>
                <p class="price">价格：&yen;{{ book.price }}</p>
                <el-divider></el-divider>
                <p class="intro">{{ book.detail }}</p>
                <div class="button-group">
                    <el-button type="warning" size="medium" @click="addCart(book.id)">加入购物车
                    </el-button>
                    <el-button type="primary" size="medium" @click="handlerClose"
                               icon="el-icon-circle-close">关闭</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<style scoped>
    .dialog-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .book-image {
        width: 30%;
        text-align: center;
    }

    .book-image img {
        max-width: 100%;
        height: auto;
    }

    .book-info {
        width: 68%;
    }

    .title {
        font-size: 24px;
        font-weight: bold;
        margin: 0 0 6px;
    }

    .author {
        font-size: 18px;
        margin: 0 0 4px;
    }

    .publisher,
    .price {
        font-size: 16px;
        margin: 0 0 2px;
    }

    .intro {
        font-size: 14px;
        margin: 0 0 10px;
    }

    .button-group {
        display: flex;
        justify-content: flex-end;
    }
</style>